<template>
  <view>
    <view class="payment" :class="pay_close ? 'on' : ''">
      <view class="title acea-row row-center-wrapper">
        选择付款方式
        <view class="iconfont" @tap="close">关闭</view>
      </view>
      <view
        v-for="(item, index) in payMode"
        :key="index"
        class="item acea-row row-between-wrapper"
        @tap="goPay(item.number || 0, item.value)"
      >
        <view class="left acea-row row-between-wrapper">
          <view class="text">
            <view class="name">{{ item.name }}</view>
            <view class="info">
              {{ item.title }}
              <span v-if="index == 1" class="money"
                >￥{{ userInfo.nowMoney }}</span
              >
            </view>
          </view>
        </view>
        <view class="iconfont icon-xiangyou"></view>
      </view>
    </view>
    <view class="mask" @click="close" v-if="pay_close"></view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import { wechatOrderPay, wechatQueryPayResult } from "@/api/order.js";
export default {
  computed: mapGetters(["userInfo"]),
  props: {
    payMode: {
      type: Array,
      default: function () {
        return [];
      },
    },
    pay_close: {
      type: Boolean,
      default: false,
    },
    order_id: {
      type: String,
      default: "",
    },
    totalPrice: {
      type: String,
      default: "0",
    },
  },
  data() {
    return {};
  },
  methods: {
    close: function () {
      this.$emit("onChangeFun", {
        action: "payClose",
      });
    },
    goPay: function (number, paytype) {
      let that = this;
      let goPages =
        "/subpageA/order-status/order-status?order_id=" + that.order_id;
      if (!that.order_id)
        return uni.showToast({
          title: "请选择要支付的订单",
          icon: "none",
        });
      if (paytype == "yue" && parseFloat(number) < parseFloat(that.totalPrice))
        return uni.showToast({
          title: "余额不足！",
          icon: "none",
        });
      uni.showLoading({
        title: "支付中",
      });
      wechatOrderPay({
        orderNo: that.order_id,

        payChannel: "routine",

        payType: paytype,
      })
        .then((res) => {
			console.log(res, 'res----')
          let jsConfig = res.data.jsConfig;
          let orderNo = res.data.orderNo;
          switch (res.data.payType) {
            case "weixin":
              uni.requestPayment({
                timeStamp: jsConfig.timeStamp,
                nonceStr: jsConfig.nonceStr,
                package: jsConfig.packages,
                signType: jsConfig.signType,
                paySign: jsConfig.paySign,
                success: function (ress) {
                  uni.hideLoading();
                  wechatQueryPayResult(orderNo)
                    .then((res) => {
                      uni.hideLoading();
                      if (res) {
                        uni.showToast({
                          title: "支付成功",
                          icon: "success",
                        });
                        that.$emit("onChangeFun", {
                          action: "pay_complete",
                        });
                      }
                    })
                    .catch((err) => {
                      uni.hideLoading();
                      return uni.showToast({
                        title: err,
                        icon: "none",
                      });
                    });
                },
                fail: function (e) {
                  uni.hideLoading();
                  uni.showToast({
                    title: "取消支付",
                    icon: "none",
                  });
                  that.$emit("onChangeFun", {
                    action: "pay_fail",
                  });
                },
                complete: function (e) {
                  uni.hideLoading();
                  if (e.errMsg == "requestPayment:cancel") {
                    uni.showToast({
                      title: "取消支付",
                      icon: "none",
                    });
                    that.$emit("onChangeFun", {
                      action: "pay_fail",
                    });
                  }
                },
              });

			break;
            case "yue":
              uni.hideLoading();
              uni.showToast({
                title: "余额支付成功",
                icon: "success",
              });
              that.$emit("onChangeFun", {
                action: "pay_complete",
              });
			break;
          }
        })
        .catch((err) => {
          uni.hideLoading();
          uni.showToast({
            title: err,
            icon: "none",
          });
          that.$emit("onChangeFun", {
            action: "pay_fail",
          });
        });
    },
  },
};
</script>

<style scoped lang="scss">
.payment {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  border-radius: 16rpx 16rpx 0 0;
  background-color: #fff;
  padding-bottom: 60rpx;
  z-index: 99;
  transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  transform: translate3d(0, 100%, 0);
}

.payment.on {
  transform: translate3d(0, 0, 0);
}

.payment .title {
  text-align: center;
  height: 123rpx;
  font-size: 32rpx;
  color: #282828;
  font-weight: bold;
  padding-right: 30rpx;
  margin-left: 30rpx;
  position: relative;
  border-bottom: 1rpx solid #eee;
}

.payment .title .iconfont {
  position: absolute;
  right: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  font-size: 28rpx;
  color: #8a8a8a;
  font-weight: normal;
}

.payment .item {
  border-bottom: 1rpx solid #eee;
  height: 130rpx;
  margin-left: 30rpx;
  padding-right: 30rpx;
}

.payment .item .left {
  width: 610rpx;
}

.payment .item .left .text {
  width: 540rpx;
}

.payment .item .left .text .name {
  font-size: 32rpx;
  color: #282828;
}

.payment .item .left .text .info {
  font-size: 24rpx;
  color: #999;
}

.payment .item .left .text .info .money {
  color: #ff9900;
}

.payment .item .left .iconfont {
  font-size: 45rpx;
  color: #09bb07;
}

.payment .item .left .iconfont.icon-zhifubao {
  color: #00aaea;
}

.payment .item .left .iconfont.icon-yuezhifu {
  color: #ff9900;
}

.payment .item .left .iconfont.icon-yuezhifu1 {
  color: #eb6623;
}

.payment .item .iconfont {
  font-size: 0.3rpx;
  color: #999;
}
</style>
